// 路由列表 轻度封装根据传入pageName判断显示需要的组件
<template>
  <div class="flex-column">
    <div class="flex justify-between flex-row-reverse">
      <div class="text-right flex flex-wrap justify-end">
        <el-input
          v-model.trim="queryData.keyword"
          class="mb-10"
          style="width: 300px"
          maxlength="32"
          clearable
          :placeholder="$t('SERVICE_NAME') + '/' + $t('SERVICE_CODE')"
          @keyup.enter.native="$debounce(search)"
        />
        <el-select
          v-model="queryData.status"
          clearable
          style="width: 200px"
          class="ml-10 mb-10"
          :placeholder="$t('FAULT_LOCATION_STATUS')"
        >
          <el-option
            v-for="item in dictList.FAULT_LOCATION_STATUS"
            :key="item.label"
            :value="item.value"
            :label="item.label"
          />
        </el-select>
        <el-select
          v-model="stationType"
          clearable
          style="width: 200px"
          class="ml-10 mb-10"
          :placeholder="$t('SELECT_STATION')"
          @change="selectedIds = []"
        >
          <el-option value="no" :label="$t('NOT_A_Z')" />
          <el-option value="a" :label="$t('TRANS_DIRECT_START')" />
          <el-option value="z" :label="$t('TRANS_DIRECT_END')" />
        </el-select>
        <!-- 全部区域 -->
        <region-cascader
          v-show="stationType == 'no' || stationType == ''"
          style="width: 280px"
          class="ml-10 mb-10"
          :multiple="true"
          :selected-ids="selectedIds"
          @change="stationChange"
        />
        <!-- 占位用 -->
        <div v-show="stationType == 'no' || stationType == ''" style="width: 280px" />
        <!-- A端站点 -->
        <region-cascader
          v-show="stationType === 'a' || stationType === 'z'"
          style="width: 280px"
          class="ml-10 mb-10"
          :selected-ids="selectedIds"
          :placeholder="stationType === 'a' ? 'A_END_STATION_NAME' : 'Z_END_STATION_NAME'"
          :multiple="true"
          @change="
            val => {
              stationType === 'a' ? aStationChange(val) : zStationChange(val)
            }
          "
        />
        <!-- Z端站点 -->
        <region-cascader
          v-show="stationType === 'a' || stationType === 'z'"
          class="ml-10 mb-10"
          style="width: 280px"
          :selected-ids="selectedIds"
          :placeholder="stationType === 'a' ? 'Z_END_STATION_NAME' : 'A_END_STATION_NAME'"
          :multiple="true"
          @change="
            val => {
              stationType === 'a' ? zStationChange(val) : aStationChange(val)
            }
          "
        />
        <el-button type="primary" class="ml-10 mb-10" @click="$debounce(search)">{{
          $t('QUERY')
        }}</el-button>
      </div>
    </div>
    <TableView
      :table-header="tableHeader"
      :table-data="tableData"
      :page-data="pageData"
      :operate-width="120"
      @operate="operate"
      @pageChange="pageChange"
    />
    <!-- 故障定位 -->
    <result-detail :visible="showResult" :row-data="rowData" @close="closeResult" />
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  import faultLocationApi from '@/api/oen/FaultLocationApi'
  import RegionCascader from '@/components/RegionCascader'
  import ResultDetail from './ResultDetail'
  import TableView from '@/components/TableView'
  import { getParentsById } from '@/utils/common'
  let searchData = {} // 查询参数 只有点了查询有效
  export default {
    components: {
      RegionCascader,
      ResultDetail,
      TableView
    },
    data() {
      return {
        pageData: {
          page: 1,
          size: 20,
          total: 0
        },
        queryData: {
          keyword: '',
          status: '',
          startStationIdList: [],
          endStationIdList: [],
          stationIdList: []
        },
        selectedIds: [],
        stationType: '',
        tableData: [],
        rowData: {},
        showResult: false,
        tableHeader: [
          {
            label: 'FAULTY_SERVICE_NAME',
            prop: 'bizOpen.bizName',
            fixed: 'left',
            width: 120,
            configType: 'default'
          },
          {
            label: 'FAULT_LOCATION_STATUS',
            prop: 'statusName',
            fixed: 'left',
            width: 110,
            configType: 'default'
          },
          {
            label: 'FAULT_SERVICE_CODE',
            prop: 'bizOpen.resourceCode',
            width: 110,
            configType: 'extend'
          },
          {
            label: 'BIZ_LEVEL',
            prop: 'bizLevelName'
          },
          {
            label: 'A_END_REGIONAL_STATION_NAME',
            width: 200,
            prop: 'startStationName'
          },
          {
            label: 'A_END_ROOM_NAME',
            prop: 'startRoomName',
            width: 200,
            configType: 'extend'
          },
          {
            label: 'ANODE',
            width: 260,
            prop: 'bizOpen.startNode.nodeName'
          },
          {
            label: 'Z_END_REGIONAL_STATION_NAME',
            width: 200,
            prop: 'endStationName'
          },
          {
            label: 'Z_END_ROOM_NAME',
            prop: 'endRoomName',
            width: 200,
            configType: 'extend'
          },
          {
            label: 'ZNODE',
            width: 260,
            prop: 'bizOpen.endNode.nodeName'
          },
          {
            label: 'CREATION_TIME',
            prop: 'createTime',
            width: 200
          }
        ]
      }
    },
    computed: {
      ...mapGetters(['baseRegionList', 'dictList', 'dictMap', 'stationTree']),
      permission() {
        return this.$store.getters.getAuthData('biz:faultLocation')
      }
    },
    activated() {
      this.loadData()
    },
    methods: {
      loadData() {
        this.tableData = []
        faultLocationApi.queryPage({ ...searchData }, { ...this.pageData }).then(res => {
          res.list = res.list || []
          res.list.forEach(i => {
            i.startStationName = this.getRegionName(i.bizOpen.startStationId)
            i.endStationName = this.getRegionName(i.bizOpen.endStationId)
            i.startRoomName = this.getRoomName(i.bizOpen.startNode.roomId)
            i.endRoomName = this.getRoomName(i.bizOpen.endNode.roomId)
            i.bizLevelName = this.dictMap.BIZ_LEVEL[i.bizOpen.bizLevel]
            i.statusName = this.dictMap.FAULT_LOCATION_STATUS[i.status]
            i.btns = this.getBtns(i)
          })
          this.tableData = res.list
          this.pageData.total = res.total
        })
      },
      getBtns(row) {
        const btns = [
          {
            key: 'view',
            show: this.permission.view && this.regionAuthor(row),
            label: 'VIEW_RESULT'
          },
          {
            key: 'del',
            show: this.permission.del && this.regionAuthor(row),
            label: 'DEL'
          }
        ]
        return btns.filter(i => i.show)
      },
      // 操作
      operate(data) {
        if (data.type === 'view') {
          this.rowData = data.data
          this.showResult = true
          return
        }
        if (data.type === 'del') {
          this.del(data.data)
          return
        }
      },
      // 获取区域/站点
      getRegionName(regionId) {
        const parents = getParentsById(this.stationTree, regionId, 'regionId') || []
        return parents
          .reverse()
          .map(i => i.regionName)
          .join('/')
      },
      // 机房
      getRoomName(roomId) {
        if (!roomId) return ''
        const stationData = this.baseRegionList.find(i => i.regionId === roomId)
        return stationData ? stationData.regionName : ''
      },
      // 区域搜索条件改变
      aStationChange(data) {
        this.queryData.startStationIdList = data
      },
      zStationChange(data) {
        this.queryData.endStationIdList = data
      },
      stationChange(data) {
        this.queryData.stationIdList = data
      },
      // 关键字搜索
      search() {
        this.pageData.page = 1
        this.queryData.keyword = this.queryData.keyword.trim()
        searchData = {
          ...this.queryData,
          status: this.queryData.status || null
        }
        this.loadData()
      },
      // 删除
      del(row) {
        this.$confirm(
          this.$t('CONFIRM_DELETE_FAULT_BIZ', {
            name: row.bizOpen.bizName
          }),
          { type: 'warning' }
        )
          .then(() => {
            faultLocationApi
              .delete({
                id: row.id,
                bizName: row.bizOpen.bizName
              })
              .then(res => {
                if (res) {
                  this.$message.success(this.$t('DELETE_SUCCESS'))
                  this.loadData()
                }
              })
          })
          .catch(() => {})
      },
      pageChange(data) {
        this.pageData = data
        this.loadData()
      },
      // 区域权限判断控制
      regionAuthor(row) {
        return (
          (this.baseRegionList.some(i => i.regionId === row.bizOpen.startStationId) &&
            this.baseRegionList.some(i => i.regionId === row.bizOpen.endStationId)) ||
          this.getUserId === 'admin'
        )
      },
      closeResult(reload) {
        this.showResult = false
        if (reload === true) {
          this.loadData()
        }
      }
    }
  }
</script>

<style></style>
